.animated
{
    -webkit-animation: lamp ease-in-out 1s .5s 1000;
    animation: lamp ease-in-out 1s .5s 1000;
}
/*.notify
{
    -webkit-animation: notify ease-in-out 1s .5s 100;
    animation: notify ease-in-out 1s .5s 100;
}*/
.flex{
display: -moz-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-moz-flex-direction:column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}
.flex-full{
-moz-flex:1;
-webkit-box-flex:1;
    -ms-flex:1;
        flex:1;
overflow: hidden;
}
.alarm-lamp{
    height: 32px;
    line-height: 32px;
}
.alarm-lamp button{
width: auto
}
.lamp{
    width: 32px;
    height: 32px;
}
.tips {
    margin-top: 7px;
    color: rgb(255, 255, 255);
    height: 20px;
    min-width: 35px;
    line-height: 20px;
    text-align: center;
    font-family: 黑体;
    background: rgb(255, 30, 30);
    padding: 2px 10px;
    border-radius: 10px;
}
.alarm-section{
    background: rgba(8, 28, 69, 0.95);
    z-index: 1000;
    position: absolute;
    /* top: 122px; */
    right: 30px;
    -webkit-box-shadow: 0 0 6px black;
            box-shadow: 0 0 6px black;
    width: 68%;
/* height: 75%; */
height: 0;
/* padding: 15px; */
padding: 0;
    min-width: 375px;
/* min-height: 667px; */
min-height: 0px;
    /* border: 1px solid #76bd47; */
border-radius: 5px;
border: none;
/* animation: myHidden .5s; */
}
@-webkit-keyframes myHidden
{
from {height: 68%;min-height: 667px;padding: 15px;}
to {height: 0;min-height: 0;padding:0 15px;}

}
@keyframes myHidden
{
from {height: 68%;min-height: 667px;padding: 15px;}
to {height: 0;min-height: 0;padding:0 15px;}

}
.alarm-section-show{
height: 68%;
min-height: 667px;
padding: 15px;
z-index: 1000;
border: 1px solid #76bd47;
-webkit-animation: myShow .5s;
        animation: myShow .5s;
}
@-webkit-keyframes myShow
{
from {height: 0;min-height: 0;padding:0 15px;}
to {height: 68%;min-height: 667px;padding: 15px;}
}
@keyframes myShow
{
from {height: 0;min-height: 0;padding:0 15px;}
to {height: 68%;min-height: 667px;padding: 15px;}
}
.alarm-section>section{
height: 100%;
width: 100%;
overflow: hidden;
}
.alarm-section-title{
height: 38px;
line-height: 30px;
font-size: 24px;
margin-bottom: 5px;
color: #90ffd7;
font-size: 16px;
}
.alarm-section-title button{
margin-right: 43px;
}
.alarm-section-title>span{
float: right;
left: 10px;
position: relative;
}
.alarm-section-title i{
display: inline-block;
/*height: 32px;
    line-height: 26px;*/
    border: 1px solid #90ffd7;
    padding: 2px 6px;
    font-style: normal;
cursor: pointer;
}
/*过滤框*/
.search{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
float: right;
margin-right: 20px;
}
.search p{
margin-left: 8px;
font-size: 14px;
}
.search p input{
background: none;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #fff;
    height: 21px;
width: 100px;
    padding: 0 6px;

}
.active1,.active2,.active3{
-webkit-box-shadow: 1px 1px 1px 1px #aaa;
        box-shadow: 1px 1px 1px 1px #aaa;
background: #9f9b63;
}
.alarm-section button{
border:none;
border:1px solid #50a4e4;
border-radius: 4px;
padding: 2px 5px;
font-size: 12px;
background: rgba(39,122,185, 0.6);
color: white;
}
.alarm-section .close-alarm{
width: 12px;
height: 12px;
background: url("")no-repeat center;
background-size: 12px auto;
position: absolute;
right: 10px;
top: 0;
cursor: pointer;
}
.alarm-section-header{
    height: 44px;
    border-bottom: 2px solid #86bdec;
    padding: 0 20px;
}
.alarm-section-header span{
    display: inline-block;
    width: 100px;
    height: 100%;
    line-height: 44px;
    color: #93cdff;
    cursor: pointer;
    border:1px solid #86bdec;
    border-bottom: 2px solid transparent;
    background: #092845;
    text-align: center;
    font-size: 14px;
    position: relative;
    opacity: 0.4;
    bottom: 0;
}
.alarm-section span.on{
    opacity: 1;
    bottom: -2px;
}
.alarm-section-summary{
height: 60%;
overflow: hidden;
}
.alarm-section-detailed{
height: 40%;
overflow: hidden;
}
.alarm-section-detailed>div{
height: 100%;
}
.alarm-section-conter{
height:99%;
overflow: auto; /* 让它显示滚动条 */
}
.alarm-section-conter::-webkit-scrollbar
{
    width: 6px;
    height: 16px;
    background-color: #000;
}
.mat-tab-group {
    height: 100%;
}
.mat-tab-header {
    height: 49px;
}
.mat-tab-body-wrapper {
overflow-y: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.zk-table span{
padding: 2px 6px;
border-radius: 5px;
}
/*定义滚动条轨道 内阴影+圆角*/
.alarm-section-conter::-webkit-scrollbar-track
{
    background-color:#4E84A8;
    border-radius:2em;
}
/*定义滑块 内阴影+圆角*/
.alarm-section-conter::-webkit-scrollbar-thumb
{
    background-color:#0F2741;
    border-radius:2em;
}
@-webkit-keyframes lamp
{
0%,
100%
{
-webkit-transform: rotate(0);
}

10%,
30%,
50%,
70%,
90%
{
-webkit-transform: rotate(-15deg);
}

0%,
20%,
40%,
60%,
80%,
100%
{
-webkit-transform: rotate(15deg);
}
}
@keyframes lamp
{
0%,
100%
{
-webkit-transform: rotate(0);
        transform: rotate(0);
}

10%,
30%,
50%,
70%,
90%
{
-webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
}

20%,
40%,
60%,
80%
{
-webkit-transform: rotate(15deg);
        transform: rotate(15deg);
}
}
/*@-webkit-keyframes notify
{
0%
{

background-color: #091D45;
}
80%
{
background-color: #091D45;
}
100%
{
background-color: none;
}
}

@keyframes notify
{
0%
{
background-color: #091D45;
}
80%
{
background-color: #091D45;
}
100%
{
background-color: none;
}
}*/
/*===========================================*/
:host/deep/ .ui-datatable table{
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
}
/* thead */
:host/deep/ .ui-datatable th.ui-state-default{
    color: white;
    background-color: #9f9b63;
}
:host/deep/ .ui-datatable tbody > tr.ui-widget-content{
    border: 1px solid #555;
}
:host/deep/ .ui-column-title{
    width: 10px;
    height: 10px;
}
/* th */
:host/deep/ .ui-widget-content{
    border: 1px solid #555;
    background: #064e8b;
    color: #fff;
    text-align: center;
}
/*===========================================*/
.alarm-hide {
    display: none;
}
:host/deep/ .ui-widget-content .ui-datatable-emptymessage{
    opacity: 0!important;

}
:host/deep/ .ui-grid {
    border: none;
}
:host/deep/  ul li:before,:host/deep/  ol li:before{
    content: "";
}
:host/deep/  .ui-datascroller .ui-datascroller-content ,:host/deep/ .ui-datascroller .ui-datascroller-header{
    padding: 0;
    border:1px solid #555;
}
:host/deep/ .ui-widget li{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    line-height: 40px;
    padding-left: 0;
    border-bottom:1px solid #555;
}
:host/deep/ .ui-widget li .ui-grid-row div{
    border-right:1px solid #555;
}
:host/deep/ .ui-widget li .ui-grid-row,:host/deep/ .ui-widget-header .ui-grid-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
:host/deep/ .ui-widget li .ui-grid-row div,:host/deep/ .ui-widget-header .ui-grid-row div{
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
    overflow: hidden;
    text-align: center;
}
:host/deep/ .ui-widget li .ui-grid-row div span{
    padding: 5px 15px;
    border-radius: 8px;
}
:host/deep/ .ui-widget-header{
    color: white;
    background: #9f9b63;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
}
